<template>
  <div>
      <a-form :form="form" style="height: 100%;">
          <a-row>
              <a-col :span="24">
                  <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.urlShortcut','URL快捷方式')">
                      <a-select :options="fieldDts" @change="changeParamField" style="width:50%;"/>
                      <a-dropdown>
                          <a-button>{{i18n('list.insertVar','插入变量')}}</a-button>
                          <a-menu slot="overlay">
                              <a-menu-item>
                                  <a @click="appUrlParam('ctxPath')">{{i18n('list.appPath','应用程序路径')}}</a>
                              </a-menu-item>
                          </a-menu>
                      </a-dropdown>
                  </a-form-item>
              </a-col>
          </a-row>
          <a-row>
              <a-col :span="24">
                  <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" label="URL">
                      <rx-monaco-editor
                          ref="url"
                          language="markdown"
                          v-decorator="['url']"
                          style="height:300px;"
                      >
                      </rx-monaco-editor>
                  </a-form-item>
              </a-col>
          </a-row>
          <a-row>
              <a-col :span="24">
                  <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('list.openWith','打开方式')">
                      <a-select v-decorator="['linkType']">
                          <a-select-option value="newWindow">{{i18n('list.newWindow','新浏览器窗口')}}</a-select-option>
                          <a-select-option value="openWindow">{{i18n('list.popUp','弹出窗口')}}</a-select-option>
                      </a-select>
                  </a-form-item>
              </a-col>
          </a-row>
      </a-form>
  </div>
</template>

<script>
    import {RxMonacoEditor} from "@lowcode/jpaas-common-lib"
    export default {
      name: "renderConfig_date",
      props:["layerid","destroy"],
      components: {
        RxMonacoEditor
      },
      data(){
        return {
          labelCol: { span:6 },
          wrapperCol: { span:18 },
          labelCol1: { span:3 },
          wrapperCol1: { span:19 },
          form: this.$form.createForm(this),
          mdl:{},
          fieldDts:[]
        }
      },
      methods:{
          i18n(name,text,key){
              return this.$ti18(name,text,"formCellRender",key);
          },
        setData(data,fieldDts){
          this.mdl=data;
          this.fieldDts=fieldDts;
          this.form.setFieldsValue(this.mdl);
        },
        validate(callback){
          var self=this;
          this.form.validateFields((err, values) => {
            if(err){
              return;
            }
            if(!values.url){
              this.$message.warning(self.$ti18('rxDecorator.input','请输入')+"url！");
              return;
            }
            self.mdl=values;
            callback();
          });
        },
        getData(){
          return this.mdl;
        },
        changeData(e,field){
          this.mdl[field]=e.target.checked;
        },
        changeParamField(value){
          this.appUrlParam('record.'+value);
        },
        appUrlParam(value){
          this.$refs.url.insertContent('{'+value+'}');
        }
      }
    }
</script>

<style scoped>

</style>